<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title><?= getValInArr(getSess(SESS_DIC), array('webInfo', 'webtitle')) ?></title>
  <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
  <meta content="yes" name="apple-mobile-web-app-capable" />
  <meta content="black" name="apple-mobile-web-app-status-bar-style" />
  <meta content="telephone=no" name="format-detection" />
  <script type="text/javascript" src="<?php echo base_url() . 'public/home/js/' ?>jquery.js"></script>
  <?php include_once "public/home/html/bootstrap.php"  ?>
  <link rel="stylesheet" href="<?php echo base_url() . 'public/h_ui/lib/Hui-iconfont/1.0.8/' ?>iconfont.css">
  <link rel="stylesheet" href="<?php echo base_url() . 'public/home/css/' ?>mui.min.css">
  <link rel="stylesheet" href="<?php echo base_url() . 'public/home/css/' ?>index.css">
  <?php include_once "public/home/html/alert.php"  ?>
  <script type="text/javascript" src="<?php echo base_url() . 'public/home/js/' ?>function.js"></script>
  <script src='<?php echo base_url() . 'public/home/mobile_date/' ?>jdate.min.js'></script>
  <?php include_once "public/home/html/mobile_dialog.php"  ?>
  <link rel="stylesheet" href="<?php echo base_url() . 'public/home/css/' ?>other.css">

</head>

<body>
  <style>
    body {
      padding: 3%;
      text-align: center;
      color: #3A3A3A;
      background-color: #f5f5f5;
      font-size: 16px
    }

    .aui-img-logo img {
      width: 80px;
      height: 80px;
      display: block;
      border: none;
      border-radius: 100%;
      margin: 0 auto;
    }

    li {
      list-style: none
    }

    .list-group-item {
      height: 50px;
      line-height: 25px
    }

    .col-xs-4 {
      color: #3A3A3A;
    }

    .col-xs-8 {
      color: #8C8C8C;
    }

    .weekend {
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
    }

    .result {
      position: absolute;
      /* bottom: -200px; */
      width: 100%;
      max-height: 200px;
      border: 1px solid #999;
      border-top: none;
      z-index: 9999;
      background-color: #fff;
      overflow-y: scroll;
      border-radius: 3px;
    }

    .result-item {
      display: inline-block;
      padding: 0 10px;
      width: 100%;
      height: 26px;
      line-height: 26px;
      font-size: 12px;
      color: #000;
      border-bottom: 1px solid #eee;
    }

    .mask-container2 {
      position: fixed;
      width: 100%;
      height: 100%;
      background-color: transparent;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
      z-index: 999;
    }

    .mask-contaner-in {
      position: absolute;
      width: 90%;
      height: 70%;
      padding: 15px 0;
      background-color: #fff;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
      border-radius: 5px;
      overflow-y: auto;
    }
  </style>
  <div class="demo">
    <a href="javascript:;" class="aui-flex">
      <div class="aui-cou-img">
        <img src="<?php echo base_url() . 'public/home/images/' ?>icon-li-0010.png" alt="">
      </div>
      <div class="aui-flex-box-other">
        <p class="file-title"></p>
      </div>
      <div class="edit" onclick="edit(this)">编辑</div>
      <div class="delete" id="deleteItem" onclick="deleteItem(this)">删除</div>
    </a>
  </div>
  <input type="hidden" name='url' value="">
  <input type="hidden" name='pageNo' value="1">
  <div class="search-head header mui-bar mui-bar-nav row" style="background-color: #f7f9fa; border:none;">
    <div class="col-xs-1" style="margin-top: 3%">
      <a class=" Hui-iconfont Hui-iconfont-slider-left" href="javascript:void(0)" onclick="history.back();" style="color: #C9C9C9"></a>
    </div>
    <div class="col-xs-11">
      <h1 class="mui-title" style="color:#333;margin-left: -5%">教学状态专项检查表</h1>
    </div>
  </div>

  <div style="margin-top: 15%;margin-bottom:60px;" class="aui-flex-container">
  </div>

  <div class="btn more-btn btn-info radius" onclick="more()">点击加载更多</div>
  <div class="more-hint">没有更多了</div>

  <div class="mask" style="display: none;">
  </div>
  <div class="mask-container2" style="display: none;">
    <div class="mask-contaner-in">
      <div class="mask-title">教学状态专项检查表</div>
      <div class="mask-close Hui-iconfont Hui-iconfont-close" onclick="cancel()"></div>

      <div class="mask-row">
        <div class="mask-row-l">文件名称</div>
        <div class="mask-row-r"><input type="text" name="name" value="" placeholder="请输入文件名称"></div>
      </div>
      <div class="mask-row">
        <div class="mask-row-l">检查教师</div>
        <div class="mask-row-r role"><?= $_SESSION[SESS_USER_HOME]['username'] . '(' . $_SESSION[SESS_USER_HOME]['usercode'] . ')' ?></div>
      </div>
      <div class="mask-row">
        <div class="mask-row-l">督导身份</div>
        <div class="mask-row-r">
          <div class="mask-row-r-select">
            <select name="supervise" id="supervise">
            </select>
            <div class="select-btn Hui-iconfont Hui-iconfont-arrow2-bottom"></div>
          </div>
        </div>
      </div>
      <div class="mask-row">
        <div class="mask-row-l">检查时间</div>
        <div class="mask-row-r">
          <div id="listen_time"></div>
        </div>
      </div>
      <div class="mask-row">
        <div class="mask-row-l">检查主题</div>
        <div class="mask-row-r"><input type="text" name="title" value="" placeholder="请输入检查主题"></div>
      </div>
      <div class="mask-row">
        <div class="mask-row-l">检查地点</div>
        <div class="mask-row-r"><input type="text" name="address" value="" placeholder="请输入检查地点"></div>
      </div>
      <div class="mask-row">
        <div class="mask-row-l">授课分院（部）</div>
        <div class="mask-row-r"><input type="text" name="teacher_dept_name" value="" placeholder="请输入授课分院（部）"></div>
      </div>
      <div class="mask-row">
        <div class="mask-row-l">授课教师</div>
        <div class="mask-row-r">
          <input id="teacher" type="text" name="teacher_id" value="" placeholder="请输入授课教师">
          <div class="select-btn Hui-iconfont Hui-iconfont-close" onclick="clearKey()"></div>
          <div class="result" id="result" style="display: none;">
          </div>
        </div>
      </div>
      <div class="mask-row">
        <div class="mask-row-l">学生状态</div>
        <div class="mask-row-r"><textarea name="student_status" id="" cols="20" rows="4" placeholder="请输入学生状态"></textarea></div>
      </div>
      <div class="mask-row">
        <div class="mask-row-l">教师状态</div>
        <div class="mask-row-r"><textarea name="teacher_status" id="" cols="20" rows="4" placeholder="请输入教师状态"></textarea></div>
      </div>
      <div class="mask-row">
        <div class="mask-row-l">其他情况</div>
        <div class="mask-row-r"><textarea name="other_content" id="" cols="20" rows="4" placeholder="请输入其他情况"></textarea></div>
      </div>
      <div class="mask-row">
        <div class="mask-row-l">情况处理和建议</div>
        <div class="mask-row-r"><textarea name="advice" id="" cols="20" rows="4" placeholder="请输入情况处理和建议"></textarea></div>
      </div>

      <div class="btn btn-danger radius saveBtn" onclick="save(this)">保存</div>
      <div class="btn btn-primary radius" onclick="cancel()">取消</div>

    </div>
  </div>

  <script>
    $(function() {
      getDocument();
      getAttendType();

      // 输入框得到焦点时
      $("#teacher").on('focus', function() {
        if ($("#teacher").val() == '') {
          $("#result").hide()
        } else {
          $("#result").show()
          tableTeacher($("#teacher").val())
        }
      })
      // 输入框输入时
      $("#teacher").on("input", function() {
        var keyword = $("#teacher").val()
        if (keyword == '') {
          $("#result").hide()
        } else {
          tableTeacher(keyword)
        }
      });

      $('.mask').click(function(e) {
        cancel();
      })

    })


    // 添加
    function add() {
      $('.mask').fadeIn(300);
      $('.mask-container2').fadeIn(400);
      // 时间
      $('#listen_time').text(getDate());
      $('.saveBtn')[0].setAttribute('id', '')
    }
    // 编辑
    function edit(e) {
      var id = e.getAttribute('id');
      tableEdit1(id)
      $('.mask').fadeIn(300);
      $('.mask-container2').fadeIn(400);
      $('result').html('')
    }
    // 取消编辑
    function cancel() {
      $('.mask').fadeOut(300);
      $('.mask-container2').fadeOut(400);
      $('input[name="name"]').val('');
      $('input[name="title"]').val('');
      $('#listen_time').text('');
      $('input[name="address"]').val('');
      $('input[name="teacher_id"]').val('')
      $('input[name="teacher_dept_name"]').val('');
      $('textarea[name="student_status"]').val('');
      $('textarea[name="teacher_status"]').val('');
      $('textarea[name="other_content"]').val('');
      $('textarea[name="advice"]').val('');
      $('.role').text("<?= $_SESSION[SESS_USER_HOME]['username'] . '(' . $_SESSION[SESS_USER_HOME]['usercode'] . ')' ?>");
      $("#supervise option:first").prop("selected", 'selected');
      $('#result').hide();
    }
    // 保存添加
    function save(e) {
      var id = e.getAttribute('id')
      if (!id) {
        id = ''
      }
      var name = $('input[name="name"]').val();
      var title = $('input[name="title"]').val();
      var address = $('input[name="address"]').val();
      var deptName = $('input[name="teacher_dept_name"]').val();
      var AttendType = $('select[name="supervise"]').find('option:selected').val();
      if (name == '') {
        $(document).dialog({
          content: '请输入文件名称',
        });
      } else if (title == '') {
        $(document).dialog({
          content: '请输入检查主题',
        });
      } else if (address == '') {
        $(document).dialog({
          content: '请输入检查地点',
        });
      } else if (deptName == '') {
        $(document).dialog({
          content: '请输入授课分院（部）',
        });
      } else if (!AttendType) {
        $(document).dialog({
          content: '请选择督导身份',
        });
      } else {
        tableSave1(id)
      }
    }

    // 删除
    function deleteItem(e) {
      $(document).dialog({
        type: 'confirm',
        closeBtnShow: true,
        content: '确认删除吗？',
        onClickConfirmBtn: function() {
          var id = e.getAttribute('id');
          delDocument(id);
        },
        onClickCancelBtn: function() {},
        onClickCloseBtn: function() {}
      });
    }

    // 选择老师
    function itemChoose(e) {
      var value = e.innerText
      // console.log('e',e)
      var id = e.getAttribute('data-id')
      // console.log('id',id)
      $('#teacher').val(value)
      $('#teacher')[0].setAttribute('data-id', id)
      $("#result").hide()
    }
    // 清除关键词
    function clearKey() {
      $('#result').hide();
      $('#teacher').val('')
    }

    function getDate() {
      var _this = this;
      var nowTime = '';
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1;
      let dd = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate();
      nowDate = yy + "-" + mm + "-" + dd;
      return nowDate;
    }
    new Jdate({
      el: '#listen_time',
      format: 'YYYY-MM-DD',
      beginYear: 2020,
      endYear: 2050
    })


    // 获取督导类型
    function getAttendType() {
      $.ajax({
        type: "POST",
        url: getRootPath() + '/Home/Other/getAttendType',
        data: {},
        dataType: "json",
        success: function(data) {
          console.log('getAttendType success', data)
          if (data.status == true) {
            var AttendType = data.res.AttendType
            for (var i = 0; i < AttendType.length; i++) {
              var demo = '<option value="' + AttendType[i].key + '">' + AttendType[i].value + '</option>';
              $('#supervise').append(demo);
            }
          }

        },
        error: function(data) {
          console.log('getAttendType error', data)
        }
      });
    }

    // 获取列表页
    function getDocument(pageNo = 1, pageSize = 20) {
      $.ajax({
        type: "POST",
        url: getRootPath() + "/Home/Other/getDocument",
        data: {
          type: 4,
          pageNo: pageNo,
          pageSize: pageSize
        },
        dataType: "json",
        success: function(data) {
          console.log('getDocument success', data)
          if (data.status == true) {
            var res = data.res
            var ret = res.ret
            for (var i = 0; i < ret.length; i++) {
              var demo = $('.demo')
              demo.find('.file-title').html('(' + ret[i].username + ')' + ret[i].name)
              demo.find('.edit').attr('id', ret[i].id)
              demo.find('.delete').attr('id', ret[i].id)
              $('.aui-flex-container').append(demo.html())
            }
            if (pageNo >= res.totalPage) {
              $('.more-btn').hide();
              $('.more-hint').show();
            }
          }

        },
        error: function(data) {
          console.log('getDocument error', data)

        }
      });
    }

    // 获取教师列表
    function tableTeacher(teacher_name) {
      $.ajax({
        type: "POST",
        url: getRootPath() + "/Home/Other/tableTeacher",
        data: {
          teacher_name: teacher_name
        },
        dataType: "json",
        success: function(data) {
          console.log('tableTeacher success', data)
          if (data.status == true) {
            var teacherList = data.res.teacher
            var resultHtml = '';
            if (teacherList.length == 0) {
              $("#result").hide()
            } else {
              for (var i = 0; i < teacherList.length; i++) {
                var itemObj = '<div class="result-item" data-id="' + teacherList[i].id + '" onclick="itemChoose(this)" >' + teacherList[i].username + '(' + teacherList[i].usercode + ')' + '</div>';
                resultHtml += itemObj
              }
              $('#result').html(resultHtml);
              $("#result").show()
            }

          }

        },
        error: function(data) {
          console.log('tableTeacher error', data)
        }
      });
    }

    // 保存接口
    function tableSave1(id) {
      var name = $('input[name="name"]').val();
      var title = $('input[name="title"]').val();
      var sub_time = $('#listen_time').text();
      var address = $('input[name="address"]').val();
      var teacher_id = $('input[name="teacher_id"]')[0].getAttribute('data-id');
      console.log('teacher_id', teacher_id);
      var teacher_dept_name = $('input[name="teacher_dept_name"]').val();
      var student_status = $('textarea[name="student_status"]').val();
      var teacher_status = $('textarea[name="teacher_status"]').val();
      var other_content = $('textarea[name="other_content"]').val();
      var advice = $('textarea[name="advice"]').val();
      var AttendType = $('select[name="supervise"]').find('option:selected').val();
      $.ajax({
        type: "POST",
        url: getRootPath() + "/Home/Other/tableSave4",
        data: {
          id: id,
          name: name,
          title: title,
          sub_time: sub_time,
          address: address,
          teacher_id: teacher_id,
          teacher_dept_name: teacher_dept_name,
          student_status: student_status,
          teacher_status: teacher_status,
          other_content: other_content,
          advice: advice,
          AttendType: AttendType
        },
        dataType: "json",
        success: function(data) {
          console.log('tableSave1 success', data)
          if (data.status == true) {
            $(document).dialog({
              content: data.msg,
              onClickConfirmBtn: function() {
                cancel();
                $('.aui-flex-container').html('')
                getDocument();
              },
            });
          } else {
            $(document).dialog({
              content: data.msg,
            });
          }
        },
        error: function(data) {
          console.log('getDocument error', data)
        }
      });
    }

    // 删除
    function delDocument(id) {
      $.ajax({
        type: "POST",
        url: getRootPath() + "/Home/Other/delDocument",
        data: {
          id: id,
          type: 4
        },
        dataType: "json",
        success: function(data) {
          console.log('delDocument success', data)
          if (data.status == true) {
            $(document).dialog({
              type: 'notice',
              infoText: '删除成功',
              autoClose: 1000,
            });
            getDocument();
          }

        },
        error: function(data) {
          console.log('delDocument error', data)
        }
      });
    }

    // 编辑
    function tableEdit1(id) {
      var dialogObj = $(document).dialog({
        type: 'notice',
        infoText: '正在加载中',
      });
      $.ajax({
        type: "POST",
        url: getRootPath() + "/Home/Other/tableEdit4",
        data: {
          id: id
        },
        dataType: "json",
        success: function(data) {
          console.log('tableEdit1 success', data)
          if (data.status == true) {
            var detail = data.res.detail
            $('input[name="name"]').val(detail.name);
            $('input[name="title"]').val(detail.title);
            $('#listen_time').text(detail.sub_time);
            $('input[name="address"]').val(detail.address);
            $('input[name="teacher_id"]').val(detail.teacher_username + '(' + detail.teacher_usercode + ')');
            $('#teacher')[0].setAttribute('data-id', detail.teacher_id);
            $('input[name="teacher_dept_name"]').val(detail.teacher_dept_name);
            $('textarea[name="student_status"]').val(detail.student_status);
            $('textarea[name="teacher_status"]').val(detail.teacher_status);
            $('textarea[name="other_content"]').val(detail.other_content);
            $('textarea[name="advice"]').val(detail.advice);
            $('.saveBtn')[0].setAttribute("id", detail.id);
            $('.role').text(detail.admin_username + '(' + detail.admin_usercode + ')');
            $('select[name="supervise"]').val(detail.AttendType);
            dialogObj.close()
          }
        },
        error: function(data) {
          console.log('tableEdit1 error', data)
          dialogObj.close()
        }
      });
    }

    function more() {
      var pageNo = $('input[name="pageNo"]').val();
      pageNo++
      $('input[name="pageNo"]').val(pageNo);
      getDocument(pageNo)
    }
  </script>




</body>

</html>